window.onload = () => {
    // 获取元素
    var btn_add = document.querySelector('.btn_add');
    var list = document.querySelector('.list');
    var ul = document.querySelector('.notes .list ul');
    var preview = document.querySelector('.preview');
    var input_title = document.querySelector('.notes .preview .title')
    var textarea = document.querySelector('.notes .preview .body')
    var lis = null;
    var sidebar = document.querySelector('.sidebar');
    // 点击btn显示内容
    btn_add.addEventListener('click', function () {
        // 创建元素 并赋予默认值
        // 创建sidebar 的侧边栏内容
        var li = document.createElement('li');
        var div_header = document.createElement('div');
        div_header.setAttribute('id', 'list_header')
        div_header.className = 'list_header'
        div_header.innerHTML = '新建注释'
        var div_body = document.createElement('div');
        div_body.className = 'list_body'
        div_body.innerHTML = '请注意...'
        var div_update = document.createElement('div');
        div_update.className = 'list_updated'
        div_update.innerHTML = getDate_time();
        ul.insertBefore(li, ul.children[0])
        li.appendChild(div_header)
        li.appendChild(div_body)
        li.appendChild(div_update)
        // 首个创建的li是默认选择的样式
        lis = document.querySelectorAll('.sidebar li')
        // 判断是否时第一个生成li，不是则排他
        if (lis.length < 2 && lis.length == 1) {
            // 生成时直接上样式
            lis[0].className = 'selected'
            lis[0].children[0].className = 'borderBottom'
            // 有li显示预览框
            preview.style.display = 'flex'
        } else if (lis.length < 1) {
            preview.style.display = 'none'
        } else {
            // 清楚其他人留下第一个li的样式
            for (let j = 0; j < lis.length; j++) {
                lis[j].className = ''
                lis[j].children[0].className = 'list_header'
            }
            lis[0].className = 'selected'
            lis[0].children[0].className = 'borderBottom'
        }

        // 遍历所有li
        for (let i = 0; i < lis.length; i++) {
            // 给所有的表上序号
            lis[i].setAttribute('index', i);
            // li 被点击的时候
            lis[i].onclick = function () {
                console.log('li被单机')
                for (let j = 0; j < lis.length; j++) {
                    lis[j].className = ''
                    lis[j].children[2].className = ''
                    lis[j].children[0].className = 'list_header'
                    lis[j].children[2].className = 'list_updated'
                }
                this.className = 'selected'
                this.children[0].className = 'borderBottom'
                this.children[2].className = 'list_updated sele'
                // 选中li的时候，预览框展示卡片内容
                if (this.children[0].innerHTML !== '新建注释') {
                    // 卡片标题不为空就展示
                    input_title.value = this.children[0].innerHTML
                } else {
                    input_title.value = ""
                }
                if (this.children[1].innerHTML !== '请注意...') {
                    // 卡片内容不为空就展示
                    textarea.value = this.children[1].innerHTML
                } else {
                    textarea.value = ""
                }
            }
            // 被双击时
            lis[i].ondblclick = function () {
                //被双击时应该立马关闭
                console.log("执行了dbclick事件")
                var delFlag = confirm('你确认删除吗？');
                if (delFlag) {
                    this.remove()
                    if (input_title.value !== "" || textarea.value !== "") {
                        input_title.value = ""
                        textarea.value = ""
                    }
                }
            }

        }

        // 当li大于5个时 文本域内容框变大
        if (sidebar.offsetHeight > window.innerHeight) {
            textarea.style.height = 150 + textarea.offsetHeight + 'px'
        }
    })

    // 预览框内容同步给卡片
    input_title.addEventListener('blur', function () {
        // 获取当前的li
        var date_header = document.querySelector('.selected');
        var date_time = document.querySelector('.sele')
        // 当标题存在内容写进卡片里
        if (this.value !== '') {
            date_header.children[0].innerHTML = this.value
            date_time.innerHTML = getDate_time()
        } else {
            // 当标题不存在内容恢复
            date_header.children[0].innerHTML = '新建注释'
        }
    })
    textarea.addEventListener('blur', function () {
        // 获取当前的li
        var date_header = document.querySelector('.selected');
        // 当文本域存在内容写进卡片里
        if (this.value !== '') {
            date_header.children[1].innerHTML = this.value
            date_header.children[2].innerHTML = getDate_time()

        } else {
            // 当文本域不存在内容恢复
            date_header.children[1].innerHTML = '请注意...'
        }
    })
    // 时间模块
    function getDate_time() {
        // 生成时间戳
        var date = new Date();
        var year = date.getFullYear();// 获取年
        var month = date.getMonth() + 1;// 获取月
        var dates = date.getDate();// 获取日
        // 声明一个星期数组
        arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var day = date.getDay();// 获取星期索引
        var hour = date.getHours();// 获取小时
        var minute = date.getMinutes();// 获取分钟
        var second = date.getSeconds();// 获取s
        second = second < 10 ? '0' + second : second;
        //格式化输出
        return (year + '年' + month + '月' + dates + '日' + arr[day] + ' ' + hour + ':' + minute + ':' + second)
    }

}
